<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智省 - AI购物比价专家</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary: #6C5CE7;
            --secondary: #00CEFF;
            --dark: #2D3436;
            --light: #F5F6FA;
            --success: #00B894;
            --warning: #FDCB6E;
            --danger: #E17055;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .logo {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
            margin-bottom: 1rem;
        }
        
        .tagline {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
        }
        
        .search-container {
            background: white;
            border-radius: 50px;
            padding: 5px;
            box-shadow: 0 10px 30px rgba(108, 92, 231, 0.2);
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .search-container:focus-within {
            box-shadow: 0 15px 40px rgba(108, 92, 231, 0.3);
            transform: translateY(-3px);
        }
        
        .search-input {
            width: 100%;
            padding: 20px 25px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            outline: none;
        }
        
        .search-btn {
            position: absolute;
            right: 5px;
            top: 5px;
            bottom: 5px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            border-radius: 50px;
            padding: 0 30px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .search-btn:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
        }
        
        .search-btn:active {
            transform: scale(0.98);
        }
        
        .loading {
            display: none;
            text-align: center;
            margin: 2rem 0;
        }
        
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(108, 92, 231, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s ease-in-out infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .results {
            display: none;
            margin-top: 3rem;
            animation: fadeIn 0.5s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .result-title {
            font-size: 1.5rem;
            font-weight: 700;
        }
        
        .best-choice {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .platforms {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        
        .platform {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .platform:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .platform-header {
            padding: 1.5rem;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        
        .platform-logo {
            width: 40px;
            height: 40px;
            margin-right: 15px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: white;
        }
        
        .pdd { background-color: #EE2C2C; }
        .jd { background-color: #E2231A; }
        .tb { background-color: #FF5000; }
        
        .platform-name {
            font-weight: 700;
            font-size: 1.2rem;
        }
        
        .platform-body {
            padding: 1.5rem;
        }
        
        .price {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--primary);
        }
        
        .price-details {
            margin-bottom: 1.5rem;
        }
        
        .price-detail {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: #666;
        }
        
        .price-detail span:last-child {
            font-weight: 500;
            color: var(--dark);
        }
        
        .platform-footer {
            padding: 1rem 1.5rem;
            background: #f9f9f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .platform-link {
            background: var(--primary);
            color: white;
            padding: 8px 15px;
            border-radius: 5px;
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }
        
        .platform-link:hover {
            background: var(--secondary);
        }
        
        .best-deal {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--success);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            box-shadow: 0 3px 10px rgba(0, 184, 148, 0.3);
            z-index: 1;
        }
        
        .chart-container {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 3rem;
        }
        
        .chart-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }
        
        .ai-analysis {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .ai-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }
        
        .ai-title:before {
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236C5CE7"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>') no-repeat center;
            margin-right: 10px;
        }
        
        .ai-content {
            line-height: 1.8;
            color: #444;
        }
        
        .savings {
            font-weight: 700;
            color: var(--success);
        }
        
        .try-again {
            text-align: center;
            margin-top: 3rem;
        }
        
        .try-again-btn {
            background: none;
            border: 2px solid var(--primary);
            color: var(--primary);
            padding: 12px 30px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .try-again-btn:hover {
            background: var(--primary);
            color: white;
        }
        
        footer {
            text-align: center;
            margin-top: 5rem;
            padding: 2rem 0;
            color: #666;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 1.5rem;
            }
            
            .logo {
                font-size: 2rem;
            }
            
            .platforms {
                grid-template-columns: 1fr;
            }
            
            .search-input {
                padding: 15px 20px;
            }
            
            .search-btn {
                padding: 0 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">智省</div>
            <div class="tagline">AI驱动的智能购物比价专家 · 每次搜索平均节省¥15.8</div>
            <div class="search-container">
                <input type="text" class="search-input" placeholder="输入你想购买的商品，例如：iPhone 15 Pro 256GB" id="searchInput">
                <button class="search-btn" id="searchBtn">
                    <span>智能比价</span>
                </button>
            </div>
        </header>
        
        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p>AI正在全网比价中，请稍候...</p>
        </div>
        
        <div class="results" id="results">
            <div class="result-header">
                <div class="result-title" id="productTitle">iPhone 15 Pro 256GB</div>
                <div class="best-choice">最佳选择: <span id="bestPlatform">拼多多</span></div>
            </div>
            
            <div class="platforms" id="platformsContainer">
                <!-- 平台卡片将通过JS动态生成 -->
            </div>
            
            <div class="chart-container">
                <div class="chart-title">各平台价格对比</div>
                <canvas id="priceChart"></canvas>
            </div>
            
            <div class="ai-analysis">
                <div class="ai-title">AI购物建议</div>
                <div class="ai-content" id="aiAdvice">
                    <!-- AI建议内容将通过JS动态生成 -->
                </div>
            </div>
            
            <div class="try-again">
                <button class="try-again-btn" id="tryAgainBtn">再比一次</button>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2025 智省 - AI购物比价专家</p>
    </footer>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchBtn = document.getElementById('searchBtn');
            const searchInput = document.getElementById('searchInput');
            const loading = document.getElementById('loading');
            const results = document.getElementById('results');
            const platformsContainer = document.getElementById('platformsContainer');
            const productTitle = document.getElementById('productTitle');
            const bestPlatform = document.getElementById('bestPlatform');
            const aiAdvice = document.getElementById('aiAdvice');
            const tryAgainBtn = document.getElementById('tryAgainBtn');
            let priceChart = null;
            
            // 模拟数据 - 实际应用中应该调用API获取真实数据
            const mockData = {
                "product": "iPhone 15 Pro 256GB",
                "platforms": [
                    {
                        "name": "拼多多",
                        "price": 7999,
                        "originalPrice": 8999,
                        "discount": "1000元直降",
                        "shipping": "免邮费",
                        "delivery": "2-3天",
                        "rating": 4.8,
                        "reviews": 12500,
                        "link": "https://pinduoduo.com",
                        "isBest": true
                    },
                    {
                        "name": "京东",
                        "price": 8299,
                        "originalPrice": 8999,
                        "discount": "700元优惠",
                        "shipping": "免邮费",
                        "delivery": "次日达",
                        "rating": 4.9,
                        "reviews": 18500,
                        "link": "https://jd.com",
                        "isBest": false
                    },
                    {
                        "name": "淘宝",
                        "price": 8099,
                        "originalPrice": 8999,
                        "discount": "900元优惠券",
                        "shipping": "免邮费",
                        "delivery": "3-5天",
                        "rating": 4.7,
                        "reviews": 21500,
                        "link": "https://taobao.com",
                        "isBest": false
                    }
                ],
                "aiAdvice": "根据AI分析，拼多多目前提供最优惠的价格，比京东便宜300元，比淘宝便宜100元。拼多多的百亿补贴活动使这款iPhone 15 Pro 256GB的价格降至7999元，是全网最低价。京东虽然价格稍高，但提供更快的次日达服务。如果您注重价格，推荐选择拼多多；如果您急需使用，可以考虑京东的快速配送。"
            };
            
            // 搜索按钮点击事件
            searchBtn.addEventListener('click', function() {
                const query = searchInput.value.trim();
                if (query) {
                    searchProduct(query);
                } else {
                    alert('请输入要搜索的商品名称');
                }
            });
            
            // 回车键触发搜索
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    const query = searchInput.value.trim();
                    if (query) {
                        searchProduct(query);
                    }
                }
            });
            
            // 再比一次按钮
            tryAgainBtn.addEventListener('click', function() {
                results.style.display = 'none';
                searchInput.value = '';
                searchInput.focus();
            });
            
            // 搜索商品函数
            function searchProduct(query) {
                // 显示加载中
                loading.style.display = 'block';
                results.style.display = 'none';
                
                // 模拟API调用延迟
                setTimeout(function() {
                    // 实际应用中这里应该调用DeepSeek API
                    // fetchDataFromAPI(query);
                    
                    // 使用模拟数据演示
                    displayResults(mockData);
                    
                    // 隐藏加载中，显示结果
                    loading.style.display = 'none';
                    results.style.display = 'block';
                }, 2000);
            }
            
            // 实际API调用函数
            async function fetchDataFromAPI(query) {
                const apiKey = 'sk-c6a7fb0a88f04c45a858716ce9aec15c';
                const apiUrl = 'https://api.deepseek.com/v1/shopping/compare';
                
                try {
                    const response = await fetch(apiUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Bearer ${apiKey}`
                        },
                        body: JSON.stringify({
                            product: query,
                            platforms: ['pinduoduo', 'jd', 'taobao']
                        })
                    });
                    
                    if (!response.ok) {
                        throw new Error('API请求失败');
                    }
                    
                    const data = await response.json();
                    displayResults(data);
                } catch (error) {
                    console.error('API调用错误:', error);
                    alert('获取比价信息失败，请稍后重试');
                    loading.style.display = 'none';
                }
            }
            
            // 显示结果函数
            function displayResults(data) {
                productTitle.textContent = data.product;
                
                // 清空平台容器
                platformsContainer.innerHTML = '';
                
                // 找出最佳平台
                let bestDeal = null;
                let lowestPrice = Infinity;
                
                data.platforms.forEach(platform => {
                    if (platform.price < lowestPrice) {
                        lowestPrice = platform.price;
                        bestDeal = platform;
                    }
                });
                
                bestPlatform.textContent = bestDeal.name;
                
                // 生成平台卡片
                data.platforms.forEach(platform => {
                    const platformCard = document.createElement('div');
                    platformCard.className = 'platform';
                    
                    if (platform.isBest) {
                        platformCard.innerHTML = `
                            <div class="best-deal">最划算</div>
                            <div class="platform-header">
                                <div class="platform-logo ${platform.name === '拼多多' ? 'pdd' : platform.name === '京东' ? 'jd' : 'tb'}">
                                    ${platform.name.substring(0,1)}
                                </div>
                                <div class="platform-name">${platform.name}</div>
                            </div>
                            <div class="platform-body">
                                <div class="price">¥${platform.price.toLocaleString()}</div>
                                <div class="price-details">
                                    <div class="price-detail">
                                        <span>原价</span>
                                        <span>¥${platform.originalPrice.toLocaleString()}</span>
                                    </div>
                                    <div class="price-detail">
                                        <span>优惠</span>
                                        <span>${platform.discount}</span>
                                    </div>
                                    <div class="price-detail">
                                        <span>运费</span>
                                        <span>${platform.shipping}</span>
                                    </div>
                                    <div class="price-detail">
                                        <span>配送</span>
                                        <span>${platform.delivery}</span>
                                    </div>
                                    <div class="price-detail">
                                        <span>评分</span>
                                        <span>${platform.rating} (${platform.reviews.toLocaleString()}条评价)</span>
                                    </div>
                                </div>
                            </div>
                            <div class="platform-footer">
                                <a href="${platform.link}" target="_blank" class="platform-link">去购买</a>
                                <span class="savings">节省 ¥${(platform.originalPrice - platform.price).toLocaleString()}</span>
                            </div>
                        `;
                    } else {
                        platformCard.innerHTML = `
                            <div class="platform-header">
                                <div class="platform-logo ${platform.name === '拼多多' ? 'pdd' : platform.name === '京东' ? 'jd' : 'tb'}">
                                    ${platform.name.substring(0,1)}
                                </div>
                                <div class="platform-name">${platform.name}</div>
                            </div>
                            <div class="platform-body">
                                <div class="price">¥${platform.price.toLocaleString()}</div>
                                <div class="price-details">
                                    <div class="price-detail">
                                        <span>原价</span>
                                        <span>¥${platform.originalPrice.toLocaleString()}</span>
                                    </div>
                                    <div class="price-detail">
                                        <span>优惠</span>
                                        <span>${platform.discount}</span>
                                    </div>
                                    <div class="price-detail">
                                        <span>运费</span>
                                        <span>${platform.shipping}</span>
                                    </div>
                                    <div class="price-detail">
                                        <span>配送</span>
                                        <span>${platform.delivery}</span>
                                    </div>
                                    <div class="price-detail">
                                        <span>评分</span>
                                        <span>${platform.rating} (${platform.reviews.toLocaleString()}条评价)</span>
                                    </div>
                                </div>
                            </div>
                            <div class="platform-footer">
                                <a href="${platform.link}" target="_blank" class="platform-link">去购买</a>
                                <span class="savings">节省 ¥${(platform.originalPrice - platform.price).toLocaleString()}</span>
                            </div>
                        `;
                    }
                    
                    platformsContainer.appendChild(platformCard);
                });
                
                // 更新AI建议
                aiAdvice.innerHTML = data.aiAdvice;
                
                // 绘制价格对比图表
                renderPriceChart(data.platforms);
            }
            
            // 渲染价格对比图表
            function renderPriceChart(platforms) {
                const ctx = document.getElementById('priceChart').getContext('2d');
                
                // 如果已有图表实例，先销毁
                if (priceChart) {
                    priceChart.destroy();
                }
                
                const platformNames = platforms.map(p => p.name);
                const platformPrices = platforms.map(p => p.price);
                const platformColors = platforms.map(p => 
                    p.name === '拼多多' ? '#EE2C2C' : 
                    p.name === '京东' ? '#E2231A' : '#FF5000'
                );
                
                priceChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: platformNames,
                        datasets: [{
                            label: '价格 (¥)',
                            data: platformPrices,
                            backgroundColor: platformColors,
                            borderColor: platformColors,
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: false,
                                ticks: {
                                    callback: function(value) {
                                        return '¥' + value.toLocaleString();
                                    }
                                }
                            }
                        },
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return '价格: ¥' + context.raw.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                });
            }
            
            // 初始聚焦搜索框
            searchInput.focus();
        });
    </script>
</body>
</html>